<template>
  <div>
    <div>test page</div>
    <div>用户名： {{ userInfo.name }}</div>
    <div>用户头像： <img class="avator" :src="userInfo.photo" alt="" /></div>
  </div>
</template>

<script>
import { getUserInfoAPI } from '@/api/userAPI.js'
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      userInfo: {}
    }
  },

  components: {},

  computed: {},

  mounted() {
    this.getUserInfo()
  },

  methods: {
    async getUserInfo() {
      const { data: res } = await getUserInfoAPI()
      console.log('res:', res)
      this.userInfo = res.data
      this.updateUserInfo(res.data)
      // 触发vuex里的mutation里的updateUserInfo的方法，去保存个人信息
      // this.$store.commit('updateUserInfo', res.data)
    },
    ...mapMutations(['updateUserInfo'])
  }
}
</script>
<style lang="less" scoped>
.avator {
  width: 400px;
  height: 400px;
  border-radius: 100%;
}
</style>
